<html>
<head>
	<title>Check It Later Tab</title>
	<link rel="stylesheet" href="../css/list.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../css/autoSuggest.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../css/themes/new.css" type="text/css" media="screen" class="theme" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>	
	
	<script type="text/javascript" src="../js/jquery.tmpl.min.js"></script>
	<script type="text/javascript" src="../js/jquery.query.js"></script>
	<script type="text/javascript" src="../js/jquery.autoSuggest.packed.js"></script>
	<script type="text/javascript" src="../js/jquery.marquee.js"></script>
	<script type="text/javascript" src="../js/vars.js"></script>
	<script type="text/javascript" src="../js/list.js"></script>
</head>
<body onload="init()">
	<div id="container">
		<div id="header">
			<p id="credits">
				<span id="dev"><a href="http://code.google.com/p/check-it-later/">Developed by Jason Scolaro</a></span><span id="options"><a href="options.html">options</a></span>
			</p>
			
			<h1>Check It Later Tab <span id="ril">using <a href="http://www.readitlaterlist.com">readitlaterlist.com</a></span></h1>
		</div>
		
		<div id="status"></div>
		
		<div id="content">
			<div id="boxes"></div>
			<div style="clear:both;"></div>
		</div>
		
		<div id="footer">
			<p id="resultstats">
				Showing <span id="reccount"></span> of <span id="rectotal"></span> links.
			</p>
			<p id="pager">
				Page <select id="pagenum" onchange="getList(this.value);"></select> of <span id="pagecount"></span>.  <a href="#" onclick="previousPage();return false;" id="previouspage">previous</a> | <a href="#" onclick="nextPage();return false;" id="nextpage">next</a>
			</p>
		</div>
	</div>
	
	<script id="boxTemplate" type="text/x-jquery-tmpl">
		<div id="box${itemnum}" class="box state${state}" draggable="true" ondragstart="boxdrag(this, event);" num="${itemnum}">
			<div class="box-content">
			<span class="domain">
				<img class="favicon" src="${urldomain}/favicon.ico" />${domain}
			</span>
			<a class="link" href="${item.url}">${title}</a>
			</div>
			<div class="box-footer">
				<div>			
			<a class="markread" href="#" onclick="markRead('${item.url}', this);return false;">
				<img title="Mark as Read" src="../images/markread.gif" />
			</a>
					<span class="read">Read</span>
					<div class="tags">
						<span class="taglabel">Tags:</span><input type="text" class="edittag" num="${itemnum}" value="${item.tags}" />
					</div>
				</div>
			<p class="lastupdate"><span>Last Update:</span><abbr title="Last Update: ${updateDate}">${updateDate}</abbr></p>
		</div>
		</div>
	</script>
	
	<div id="leftside">
		<div id="search">
			<input id="searchbox" value="Search" class="search-def" onfocus="if (this.value=='Search') $(this).removeClass('search-def').val('');" onkeyup="filtering();" onblur="if (this.value=='') $(this).addClass('search-def').val('Search');" />			
		</div>
		
		<div id="sorting">
			<select id="sortby" onchange="sort()">
				<option selected value="time_updated">Last Update</option>
				<option value="time_added">Date Created</option>
				<option value="title">Title</option>
			</select>
			sort by
		</div>
		
		<div id="state">
			<p>
				<input checked="checked" type="radio" name="stateof" value="unread" /> Unread only<br />
				<input type="radio" name="stateof" value="read" /> Read only<br />
				<input type="radio" name="stateof" value="all" /> All links
			</p>
		</div>
		
		<div id="refresh">
			<a href="javascript:refresh()">refresh list</a>
		</div>
		
		<div id="tagsbox">
			<h3>tags</h3>
			<ul id="tags"></ul>
		</div>
		
		<div id="trash" ondrop="boxdrop(this, event)" ondragenter="return false" ondragover="return false">
			<i>Drag Read Links Here</i>
		</div>
	</div>
	<div id="addnew"></div>

	<div class="ad">
		<marquee scrollamount="2"><strong>New Features</strong> (see <a href="options.html">options</a>) in this version: <strong>AutoSuggest</strong> of tags&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Filter by read/unread</strong> links&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Read animation</strong> can be toggled on or off</marquee>
	</div>

	<script src="../js/analytics.js"></script>
</body>
</html>